<!--
 * @Author: C.
 * @Date: 2021-09-01 13:23:26
 * @LastEditTime: 2021-09-07 10:09:14
 * @Description: file content
-->
<template>
  <Form layout="horizontal" v-bind="formItemLayout">
    <span>--{{ block.paperType }}</span>
    <span>--{{ block.direction }}</span>
    <span>--{{ block.marginLeft }}</span>
    <span>--{{ block.marginRight }}</span>
    <span>--{{ block.marginTop }}</span>
    <span>--{{ block.marginBottom }}</span>
    <FormItem label="纸张类型">
      <Select default-value="lucy" style="width: 120px" v-model:value="block.paperType">
        <SelectOption :value="item" v-for="item in pageType" :key="item">
          {{ item }}
        </SelectOption>
      </Select>
    </FormItem>
    <FormItem label="对齐方式">
      <RadioGroup v-model:value="block.direction" button-style="solid">
        <RadioButton value="portrait">纵向</RadioButton>
        <RadioButton value="landscape">横向</RadioButton>
      </RadioGroup>
    </FormItem>
  </Form>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    Form,
    // Input,
    // Textarea,
    InputNumber,
    RadioButton,
    RadioGroup,
    Select,
    SelectOption,
  } from 'ant-design-vue';
  import { usePrintStore } from '/@/store/modules/print';
  import { pageType } from '../../../../../../maps';
  export default defineComponent({
    components: {
      Form,
      FormItem: Form.Item,
      // Input,
      // Textarea,
      InputNumber,
      RadioGroup,
      RadioButton,
      SelectOption,
      Select,
    },
    setup() {
      let formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 19 } };

      let block = usePrintStore().printTemplate.paperStyle;

      return {
        formItemLayout,
        block,
        pageType,
      };
    },
  });
</script>
